<p>news works!</p>
<!-- 在组件对应的html中使用数据 -->
<h2>我是新闻组件</h2>
<ul>
  <li>{{newsTitle}}---{{msg}}</li>
</ul>

<p>userInfor: <br> name: <span>{{userInfor.name}}</span> <br> age: <span>{{userInfor.age}}</span></p>


<h3>使用[]动态绑定属性</h3>
<!-- 使用[]动态绑定属性 -->
<!-- [属性名]="数据/数据变量名" -->
<div [title]="titleInfor">
  鼠标hover，演示属性动态绑定
</div>

<h3>使用[innerHTML]解析HTML代码</h3>
<!-- 谨慎使用，可能和Vue一样容易导致网络攻击 -->
<span [innerHTML]="content"></span>

<h3>和Vue一样可在语法中执行简单运算</h3>
<p>1+2= {{1+2}} </p>


<h3>数据遍历</h3>
<!-- *ngFor循环，类式于vue中的v-for -->
<ul>
  <li *ngFor="let item of newsList;let i=index;let odd=odd;let even=even;let f=first;let l=last">
    <p>{{item}}</p>
    <p>index:{{i}}</p>
    <p>是否为奇数:{{odd}}</p>
    <p>是否为偶数:{{even}}</p>
    <p>是否为第一个:{{f}}</p>
    <p>是否为最后一个:{{l}}</p>
  </li>
</ul>

<!--  -->